<template>
	<view>
		<view class="bgc">
			<navbar>
				<view slot="center" class="center">
					<u-subsection
						:list="interpretList"
						activeColor="#000"
						mode="button"
						:current="current"
						@change="onChange"
					></u-subsection>
				</view>
			</navbar>
			<view class="merchant">
				<view>
					<view class="left_title">
						<image src="/static/image/home_1.png" mode=""></image>
						<u--text
							:text="
								language == 'zh'
									? merchant.shopname
									: merchant.shopname_copy
									? merchant.shopname_copy
									: merchant.shopname
							"
							color="#000"
							size="18px"
							bold
						></u--text>
					</view>
				</view>
				<image src="/static/image/home_2.png" class="right"></image>
			</view>
		</view>
		<view class="order">
			<view class="order_title">
				<view class="order_left">{{ $t('merchantHome.orderTiele') }}</view>
				<u-icon
					@click="goDetail({ path: '/pagesA/my/merchantOrder?current=0' })"
					name="arrow-right"
					:label="$t('merchantHome.orderAll')"
					labelPos="left"
					labelColor="rgba(171, 171, 171, 1)"
					color="rgba(171, 171, 171, 1)"
				></u-icon>
			</view>
			<view class="order_list">
				<view v-for="(item, index) in list" :key="index" @click="goDetail(item)">
					<image :src="item.image"></image>
					<view class="name">{{ language == 'zh' ? item.nameZn : item.nameEn }}</view>
				</view>
			</view>
		</view>
		<view class="realTime">
			<view class="realTitle">{{ $t('merchantHome.menuTitle') }}</view>
			<view class="grid_2">
				<view
					class="grid_item"
					@click="goDetail(item)"
					:style="{ backgroundImage: item.background }"
					v-for="(item, index) in realList"
					:key="index"
				>
					<view class="item_title" :style="{ color: item.color }">
						{{ language == 'zh' ? item.titleZn : item.titleEn }}
					</view>
					<view class="item_footer">
						<view class="item_btn" :style="{ background: item.color }">
							{{ language == 'zh' ? item.btnZn : item.btnEn }}
						</view>
						<image :src="item.image" :style="{ width: item.width, height: item.height }"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex';
export default {
	data() {
		return {
			interpretList: ['汉', 'ئۇ'],
			current: 0,
			list: [
				{
					image: '/static/image/home_3.png',
					nameZn: '待到店',
					nameEn: 'كۈتۈش دۇكىنى',
					path: '/pagesA/my/merchantOrder?current=0'
				},
				{
					image: '/static/image/home_4.png',
					nameZn: '待点餐',
					nameEn: 'ئازراق تاماق',
					path: '/pagesA/my/merchantOrder?current=1'
				},
				{
					image: '/static/image/home_5.png',
					nameZn: '待结算',
					nameEn: 'راسچوت قىلىنىدىغان',
					path: '/pagesA/my/merchantOrder?current=2'
				},
				{
					image: '/static/image/home_6.png',
					nameZn: '已支付',
					nameEn: 'تاماملاندى',
					path: '/pagesA/my/merchantOrder?current=3'
				},
				{
					image: '/static/image/home_6.png',
					nameZn: '已取消',
					nameEn: 'ئەمەلدىن قالدۇرۇلدى',
					path: '/pagesA/my/merchantOrder?current=4'
				}
			],
			realList: [
				{
					image: '/static/image/home_8.png',
					background:
						'url()',
					titleZn: '创建包厢/桌号',
					titleEn: 'ئايرىمخانا',
					btnZn: '去创建',
					btnEn: 'بەرپا قىلىش',
					width: '60px',
					height: '60px',
					color: 'rgba(115, 99, 255, 1)',
					path: '/pagesA/my/addBox?type=add'
				},
				{
					image: '/static/image/home_9.png',
					background:
						'url()',
					titleZn: '点菜',
					titleEn: 'تاماق بۇيرۇتۇش',
					btnZn: '去点菜',
					btnEn: 'تاماق بۇيرۇتۇش',
					width: '60px',
					height: '60px',
					color: 'rgba(255, 136, 51, 1)',
					// path:"/pagesA/my/state?state=1"
					path: '/pagesA/my/dishes'
				},
				{
					image: '/static/image/home_10.png',
					background:
						'url()',
					titleZn: '餐桌实时状态',
					titleEn: 'ھالەت',
					btnZn: '去查看',
					btnEn: 'تەكشۈرۈش',
					width: '60px',
					height: '60px',
					color: 'rgba(255, 193, 2, 1)',
					path: '/pagesA/my/state',
					state: 'get'
				},
				{
					image: '/static/image/home_11.png',
					background:
						'url()',
					titleZn: '餐桌状态修改',
					titleEn: 'تەھرىرلەش',
					btnZn: '去修改',
					btnEn: 'تەھرىرلەش',
					width: '60px',
					height: '60px',
					color: 'rgba(66, 176, 255, 1)',
					path: '/pagesA/my/state',
					state: 'set'
				}
			]
		};
	},
	computed: {
		...mapGetters(['merchant']),
		language() {
			return this._i18n.locale;
		}
	},
	onLoad() {

	},
	created() {
		this.getUser();

		this._i18n.locale == 'zh' ? (this.current = 0) : (this.current = 1);
	},
	methods: {
		...mapMutations(['setMerchant']),
		getUser() {
			this.$http.post('wanlshop/shop/getShopInfo').then(res => {
				if (res.code == 1) {
					this.setMerchant(res.data);
				}
			});
		},
		onChange(event) {
			this.current = event;
			this._i18n.locale = this.current == 0 ? 'zh' : 'en';
			uni.setStorageSync('locale', this._i18n.locale);
		},
		goDetail(item) {
			console.log(item);
			
			if(item.btnZn==='去点菜'){
				let shop_id=uni.getStorageSync('merchant').id
	      uni.navigateTo({
	      	url:item.path+'?shop_id='+shop_id
	      })
			}
			uni.$u.route({
				url: `${item.path}?type=${item.state}`
			});
		},
	}
};
</script>

<style lang="scss" scoped>
.bgc {
	background-image: url();
	background-repeat: no-repeat;
	background-size: 100% 100%;

	.center {
		width: 150rpx;
		margin-left: 150rpx;
	}

	.merchant {
		padding: 0rpx 36rpx 40rpx 20rpx;
		margin-top: 20rpx;
		display: grid;
		grid-template-columns: auto 80px;
		grid-column-gap: 20rpx;
		align-items: center;

		.left_title {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;

			image {
				width: 44rpx;
				height: 44rpx;
				margin-right: 10rpx;
			}
		}

		.right {
			width: 160rpx;
			height: 180rpx;
		}
	}
}

.order {
	padding: 28rpx 32rpx 40rpx;
	background: #fff;

	.order_title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30rpx;

		.order_left {
			color: rgba(0, 0, 0, 1);
			font-size: 32rpx;
			font-weight: bold;
		}
	}

	.order_list {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		grid-column-gap: 20rpx;

		image {
			width: 80rpx;
			height: 80rpx;
			display: block;
			margin: 0 auto 20rpx;
		}

		.name {
			text-align: center;
			color: rgba(0, 0, 0, 1);
			font-size: 28rpx;
			font-weight: 400;
		}
	}
}

.realTime {
	margin-top: 20rpx;
	padding: 42rpx 32rpx;
	background: #fff;

	.realTitle {
		color: rgba(0, 0, 0, 1);
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
	}

	.grid_2 {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-column-gap: 20rpx;
		grid-row-gap: 20rpx;

		.grid_item {
			background-repeat: no-repeat;
			background-size: 100% 100%;
			border-radius: 20rpx;
			padding: 30rpx 20rpx 10rpx;
			box-sizing: border-box;
			.item_title {
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 10rpx;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}

			.item_footer {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.item_btn {
				border-radius: 200rpx;
				padding: 10rpx 20rpx;
				color: #fff;
				font-size: 28rpx;
				font-weight: 400;
			}
		}
	}
}
</style>
